<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=<%=ProConfig.Map.BAIDU_MAP_KEY%>"></script>
<link type="text/css" href="<%=basePath%>/css/oss/iot/index.css?<%=v%>" rel="stylesheet"/>

</head>
<body>
	<div>
		<%@include file="moudle/header.jsp" %>
		<span class="active hide">home</span>
		<!--  下方部位  -->
		<div style="background: #ecf0f5;padding-top: 70px;">
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:80px;">
				<ul class="dashboard-menu">
					<li class="active">
                        <a href="<%=basePath%>/service/iot/index">
                            <span class="icon-paper-plane"></span>
                            <h5 style="margin-top: 9px;">项目地图</h5>
                        </a>
                    </li>
                    <li>
                        <a href="<%=basePath%>/service/iot/device_location">
                            <span class="icon-rocket"></span>
                            <h5 style="margin-top: 9px;">设备地图</h5>
                        </a>
                    </li>
                    <li>
                        <a href="<%=basePath%>/service/iot/app_status">
                            <span class="icon-institution"></span>
                            <h5 style="margin-top: 9px;">系统统计</h5>
                        </a>
                    </li>
				</ul>
			</div>
			<div class="mapContainer" >
				<div id="map"></div>
				
				<div class="searchContainer">
					<span class="map_search_span"></span>
				</div>
				<div class="show_index hide">
					<div>
						<span class="app_name">项目名称：</span>
						<span class="app_name_value"></span>
					</div>
					<div>
						<span class="app_name">备注信息：</span>
						<span class="app_desc_value"></span>
					</div>
				</div>
			</div>
			
			<div class="map_search_index">
				<div class="map_search_frame">
					<input type="text" class="map_search_frame_input" name="keyword" id="keyword" placeholder="输入项目名称搜索" >
					<button type="button" class="map_search_frame_btn" onclick="search();"></button>
				</div>
			</div>
		</div>
	</div>

	<div class="layer_notice hide">
		<div style="width: 700px;padding: 20px;">
			<div class="container-layout sceneList-info">
					<div class="box join-device-box scoll" style="max-height: 500px;overflow: auto;">
						<p>暂无传感器数据</p>
					</div>
				</div>
		</div>
	</div>
		
	<div class="template2 hide">
		<div class="map_info_window">
			<div class="map_info_titles "> 
				<h3><img src="<%=basePath%>/image/oss/iot/pro.png" class="pro_icon">  
				<span style="vertical-align: middle;">{0}</span></h3>
			</div>  
			<div class="map_info_item" style="margin-left: 10px;">
				<div class="map_info_item_sub">在线设备:&nbsp;<span style="font-size: 20px;color: #3499da;">{1}</span> 个</div> 
				<div class="map_info_item_sub">离线设备:&nbsp;<span style="font-size: 20px;color: red;">{2}</span> 个</div>
				<button class="button button-small bg-sub" onclick="forwardUrl('/iot/monitor?id={5}')"  >监控中心</button>
			</div> 
			<div class="map_info_item" style="margin-left: 10px;">
				<div class="map_info_item_sub">今日报警:&nbsp;<span style="font-size: 20px;">{3}</span> 个</div> 
				<div class="map_info_item_sub">未处理数:&nbsp;<span style="font-size: 20px;color: red;">{4}</span> 个</div> 
				<button class="button button-small bg-sub" onclick="forwardUrl('/iot/alarm_manager')" >报警处理</button>
			</div> 
		</div>
	</div>
	
</body>
<script type="text/javascript">

var map ,dataCache  ;
/**
 * 搜索
 */
function search(){
	if( slv("#keyword")!='' && !validater.empty(dataCache) ){
		for(var i=0;i<dataCache.length;i++){
			if(dataCache[i]['name'].indexOf(slv("#keyword")) >-1 ){
				map.centerAndZoom(new BMap.Point(dataCache[i].lon, dataCache[i].lat), 12);
			}
		}
	}
}

$(function(){
	
	$(".searchContainer").click(function(){
		$(this).fadeOut(20);
		$(".map_search_index").fadeIn(500);
	})
	$("#map").click(function(){
		$(".map_search_index").fadeOut(20);
		$(".searchContainer").fadeIn(500);
	})
	
	map = new BMap.Map("map"  );    // 创建Map实例
	
	map.setMapStyle({
        styleJson: [{
            "featureType": "road",//道路
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        },
        {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        },
        {
            "featureType": "poilabel",//景点
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            } 
        },
        {
            "featureType": "manmade",//学院
            "elementType": "all",
            "stylers": {
                "visibility": "off"
            }
        }
        ]
    });
	
	map.centerAndZoom('武汉', 6);  // 初始化地图,设置中心点坐标和地图级别
	
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
	        BMAP_NORMAL_MAP,
	        BMAP_HYBRID_MAP
	    ]}));
	
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
	function showInfo(e){
		theLocation(e.point.lng , e.point.lat);
	}
	
	function theLocation(lon,lat){
		selfLocation(lon,lat);
	}

	
	function setTextShowMap(lon,lat ,obj){
		var point = new BMap.Point(lon,lat);
		var opts = {
		  position : point,    // 指定文本标注所在的地理位置
		  offset   : new BMap.Size(2, -27)    //设置文本偏移量
		}
		var label = new BMap.Label(obj.name , opts); 
			label.setStyle({
				 color : "black",
				 fontSize : "14px",
				 fontFamily:"微软雅黑"
			 });
		map.addOverlay(label);   
	}
	
	// 地址设置标记点
	function selfLocation(lon,lat,obj){
		// 显示文本
		setTextShowMap(lon,lat,obj);
		//单独设定图标的样式
		var icon = new BMap.Icon('<%=basePath%>/image/oss/iot/location2.png', new BMap.Size(32, 32), {
		   anchor: new BMap.Size(32, 32)
		});
		//创建一个图像标注实例。point参数指定了图像标注所在的地理位置
		var mkr = new BMap.Marker(new BMap.Point(lon,lat), {
			icon: icon
		});
		
		mkr.addEventListener("click", function () {
			// 弹出列表传感器列表信息
			var xxm = this ;
			getAjax(localUrl+'/scene/detail?id=' + obj.id , function(data){
				if(isOK(data)){
					var sContent = $(".template2").html().format(obj.name +" ["+ obj.remark +"]" , data.data.online_device_num ,
								data.data.all_device_num - data.data.online_device_num , 
								data.data.all_alarm_num , data.data.unsolve_alarm_num , obj.id ) ;
					var opts = {
			        	offset: new BMap.Size(-3, -40)
			        }
					var infoWindow = new BMap.InfoWindow(sContent,opts  );  // 创建信息窗口对象
					xxm.openInfoWindow(infoWindow);
				}
			} );
			
// 			console.log(obj);
		});
		mkr.addEventListener("mouseover", function (e) { 
			
		});
		mkr.addEventListener("mouseout", function (e) { 
			$(".show_index").hide();
		});
		//将覆盖物添加到地图中
		map.addOverlay(mkr);
		//将地图的中心点更改为给定的点
 		map.panTo(lon,lat);
	}
	
	getMySceneData();
	
	// 获取项目信息
	function getMySceneData(){
		postAjax(localUrl+"/page/scene.json?pageSize=300&paged=1", {},function(data){
			if(isOK(data)){
				var dataT = data.data.data ;
				dataCache = dataT ;
				for(var i=0;i<dataT.length;i++){
					selfLocation(dataT[i].lon,dataT[i].lat,dataT[i]);
					if(i==0){
						map.panTo(dataT[i].lon,dataT[i].lat);
					}
				}
			}
		});
	}
})
</script>
</html>